<template>
  <div class="forward-box" :style="'width: '+width+'px;'">
<!--    pppppp-->
    <div class="forward-header">
      <el-avatar :src="data.userAvatar" :size="25"></el-avatar>
      &nbsp;
      <span class="source-nickname">
        {{data.nickname}}
      </span>
    </div>
    <div class="forward-content">
      <div class="publish-content-text">
        {{data.contentText}}
      </div>
      <template v-if="data.contentImg instanceof Array">
        <img class="content-pic" v-for="(itemImg,index) in data.contentImg" :key="index" :src="itemImg" alt="" width="200">
      </template>
      <template v-else>
        <img class="content-pic" :src="data.contentImg" alt="" width="150">
      </template>
    </div>
  </div>
</template>
<script setup>

const props = defineProps({
  data:{
    type:Object,
    default:{}
  },
  width:{
    type:Number,
    default:680
  }

})
</script>
<style lang="scss" scoped>

.forward-box{
  width: 680px;
  //height: 30px;
  box-sizing: border-box;
  padding: 20px;
  background-color: #eee7e7;
  border-radius: 5px;
  .forward-header{

    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 30px;
    .source-nickname{
      color: #ff008a;
    }
  }
  .forward-content{
    .publish-content-text{

    }

  }
}

</style>
<!--.share-box{-->
<!--width: 650px;-->
<!--height: 200px;-->
<!--background-color: #e7e7e7;-->
<!--box-sizing: border-box;-->
<!--padding: 10px;-->
<!--.share-header{-->
<!--.nickname{-->
<!--font-size: 14px;-->
<!--color:black;-->
<!--}-->
<!--display: flex;align-items: center;-->
<!--//box-sizing: border-box;-->
<!--//padding: 5px;-->
<!--height: 40px;-->
<!--font-size: 12px;-->
<!--color: gray;-->
<!--}-->
<!--.share-content{-->

<!--display: flex;color: black;-->
<!--.content-right{-->
<!--width:490px;-->
<!--background-color: #f5f5f5;-->
<!--display: flex;-->
<!--flex-direction: column;-->
<!--justify-content: space-between;-->
<!--box-sizing: border-box;-->
<!--padding: 10px 20px;-->
<!--.bottom-info{-->
<!--display: flex;-->
<!--align-items: center;-->
<!--font-size: 13px;-->
<!--color: gray;-->
<!--}-->
<!--}-->
<!--}-->
<!--}-->

<!--<div class="forward-box">-->
<!--<div class="forward-header">-->
<!--  <el-avatar :src="item.forwardDynamicVO.userAvatar" :size="25"></el-avatar>-->
<!--  &nbsp;-->
<!--  <span class="source-nickname">-->
<!--                        {{item.forwardDynamicVO.nickname}}-->
<!--                      </span>-->
<!--</div>-->
<!--<div class="forward-content">-->
<!--  <div class="publish-content-text">-->
<!--    {{item.forwardDynamicVO.contentText}}-->
<!--  </div>-->
<!--  <template v-if="item.forwardDynamicVO.contentImg instanceof Array">-->
<!--    <img class="content-pic" v-for="(itemImg,index) in item.forwardDynamicVO.contentImg" :key="index" :src="itemImg" alt="" width="200">-->
<!--  </template>-->
<!--  <template v-else>-->
<!--    <img class="content-pic" :src="item.forwardDynamicVO.contentImg" alt="" width="150">-->
<!--  </template>-->
<!--</div>-->

<!--</div>-->